<template>
  <el-dialog
    :title="$t('flowTask.userSelect')"
    width="95vw"
    top="40px"
    @close="close"
    destroy-on-close
    :model-value="visible"
  >
    <div class="user_main">
      <!-- <Aside></Aside> -->
      <Main></Main>
      <div class="right_footer">
        <el-button @click="submit(userList)" type="primary">
          <i class="el-icon-check"></i>{{ $t("common.ok") }}</el-button
        >
        <el-button @click="clear" type="danger">
          <i class="el-icon-check"></i>{{ $t("common.clear") }}</el-button
        >
        <el-button @click="close">
          <i class="el-icon-close"></i>{{ $t("common.close") }}</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Aside from "./aside/index.vue";
import Main from "./main/index.vue";
export default {
  data() {
    return {
      userList: [],
    };
  },
  emits: ["update:visible", "ok"],
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    ok: {
      type: Function,
      default: function () {
        return () => {
          console.log();
        };
      },
    },
    just: String,
  },
  provide() {
    return {
      userList: this.userList,
      rowClick: this.rowClick,
    };
  },
  components: {
    // Aside,
    Main,
  },

  computed: {},

  methods: {
    rowClick(row) {
      const index = this.userList.findIndex((item) => item === row);
      if (index === -1) {
        this.userList.push(row);
      } else {
        this.userList.splice(index, 1);
      }
    },
    submit(item) {
      this.$emit('ok',item);
      this.close();
    },
    close() {
      this.$emit("update:visible", false);
    },
    clear() {
      this.userList.length = 0;
    },
  },
};
</script>
<style lang='scss' scoped>
.user_main {
  display: flex;
  height: 78vh;

  .right_footer {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    right: 30px;
  }
}
</style>